<template>
  <div class="tip border-l-4 p-4 mb-4 mt-4" :class="`tip-${type}`">
    <div class="flex items-start">
      <div class="flex-shrink-0">
        <component :is="icon" class="tip-icon mt-px w-6 h-6" />
      </div>
      <div class="ml-2 tip-content">
        <slot />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Tip',
  props: {
    type: {
      type: String,
      default: 'info',
      validator(value) {
        return ['info', 'success', 'warning', 'danger'].includes(value)
      },
    },
  },
  computed: {
    icon() {
      return {
        info: 'SvgIconInformationCircle',
        success: 'SvgIconCheckCircle',
        warning: 'SvgIconExclamationCircle',
        danger: 'SvgIconXCircle',
      }[this.type]
    },
  },
}
</script>

<style>
.tip p {
  @apply m-0 !important;
}

.tip a {
  @apply text-gray-700 !important;
}
.dark-mode .tip a {
  @apply text-gray-300 !important;
}

.tip strong {
  @apply text-current;
}

/* Info */

.tip-info {
  @apply bg-blue-100 border-blue-400;
}
.tip-info code {
  @apply bg-blue-200 shadow-none border-0 text-current;
}
.tip-info .tip-icon {
  @apply text-blue-400;
}
.tip-info .tip-content {
  @apply text-blue-700;
}
.dark-mode .tip-info {
  @apply bg-blue-900 border-blue-700;
}
.dark-mode .tip-info .tip-content {
  @apply text-blue-300 bg-blue-900 border-blue-700;
}
.dark-mode .tip-info .tip-content code {
  @apply bg-blue-800 !important;
}

/* Success */

.tip-success {
  @apply bg-green-100 border-green-400;
}
.tip-success code {
  @apply bg-green-200 shadow-none border-0 text-current;
}
.tip-success .tip-icon {
  @apply text-green-400;
}
.tip-success .tip-content {
  @apply text-green-700;
}
.dark-mode .tip-success {
  @apply bg-green-900 border-green-700;
}
.dark-mode .tip-success .tip-content {
  @apply text-green-300 bg-green-900 border-green-700;
}
.dark-mode .tip-success .tip-content code {
  @apply bg-green-800 !important;
}

/* Warning */

.tip-warning {
  @apply bg-orange-100 border-orange-400;
}
.tip-warning code {
  @apply bg-orange-200 shadow-none border-0 text-current;
}
.tip-warning .tip-icon {
  @apply text-orange-400;
}
.tip-warning .tip-content {
  @apply text-orange-700;
}
.dark-mode .tip-warning {
  @apply bg-yellow-900 border-yellow-700;
}
.dark-mode .tip-warning .tip-content {
  @apply text-orange-300 bg-yellow-900 border-yellow-700;
}
.dark-mode .tip-warning .tip-content code {
  @apply bg-yellow-800 !important;
}

/* Danger */

.tip-danger {
  @apply bg-red-100 border-red-400;
}
.tip-danger code {
  @apply bg-red-200 shadow-none border-0 text-current;
}
.tip-danger .tip-icon {
  @apply text-red-400;
}
.tip-danger .tip-content {
  @apply text-red-700;
}
.dark-mode .tip-danger {
  @apply bg-red-900 border-red-700;
}
.dark-mode .tip-danger .tip-content {
  @apply text-red-300 bg-red-900 border-red-700;
}
.dark-mode .tip-danger .tip-content code {
  @apply bg-red-800 !important;
}
</style>
